<!doctype html>
<html lang="zh-CN">
 <head> 
  <meta charset="utf-8"> 
  <meta content="width=device-width, initial-scale=1.0" name="viewport"> 
  <title>年度规划项目 - 学员端</title> 
  <script src="../javascript/reload.js"></script> 
  <script src="./1968578812111224832/resource_782510000.js"></script> 
  <link href="./1968578812111224832/all.min.css" rel="stylesheet"> 
  <script src="./1968578812111224832/echarts.min.js"></script> 
  <script>tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        accent: '#0E42D2',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#E5E6EB',
                        'text-primary': '#1D2129',
                        'text-secondary': '#4E5969',
                        'text-tertiary': '#86909C',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    spacing: {
                        '220': '220px',
                        '250': '250px',
                    }
                },
            }
        }</script> 
  <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .menu-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .menu-item {
                @apply flex items-center px-4 py-3 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer;
            }
            .menu-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .submenu-item {
                @apply flex items-center px-8 py-2.5 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer text-sm;
            }
            .submenu-item-active {
                @apply bg-primary/10 text-primary;
            }
            .card-shadow {
                box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-accent transition-all duration-200 flex items-center justify-center;
            }
            .btn-secondary {
                @apply bg-white text-primary border border-primary px-4 py-2 rounded-md hover:bg-primary/5 transition-all duration-200 flex items-center justify-center;
            }
            .btn-outline {
                @apply bg-white text-text-secondary border border-neutral-dark px-4 py-2 rounded-md hover:bg-neutral transition-all duration-200 flex items-center justify-center;
            }
            .input-field {
                @apply w-full px-3 py-2 border border-neutral-dark rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
            }
            .table-header {
                @apply bg-neutral text-text-secondary text-sm font-medium px-4 py-3;
            }
            .table-row {
                @apply border-b border-neutral-dark hover:bg-neutral/50 transition-all duration-200;
            }
            .badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .badge-success {
                @apply bg-green-100 text-green-700;
            }
            .badge-warning {
                @apply bg-yellow-100 text-yellow-700;
            }
            .badge-danger {
                @apply bg-red-100 text-red-700;
            }
            .badge-info {
                @apply bg-blue-100 text-blue-700;
            }
        }
    </style> 
 </head> 
 <body class="font-inter bg-neutral text-text-primary h-screen flex overflow-hidden"> 
  <!-- 左侧菜单区域 --> 
  <aside class="w-220 bg-white h-full shadow-md z-10 transition-all duration-300 ease-in-out" id="sidebar"> 
   <!-- 品牌标识 --> 
   <div class="flex items-center justify-center h-16 border-b border-neutral-dark"> 
    <div class="flex items-center"> 
     <i class="fas fa-chart-line text-primary text-2xl mr-3"> </i> 
     <h1 class="text-xl font-bold text-primary"> Hi Quick AI </h1> 
    </div> 
   </div> 
   <!-- 菜单列表 --> 
   <nav class="py-4 h-[calc(100%-4rem)] overflow-y-auto scrollbar-hide"> 
    <!-- 每月必做 --> 
    <div class="menu-group"> 
     <a class="yt-a-defalut-link menu-item flex justify-between" custom-a="true" custom-href="w=1245&amp;h=762&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1968264071639728128&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: inline; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
      <div class="menu-item flex justify-between" data-menu="monthly" data-selectorname="#id-ob3k1" style> 
       <div class="flex items-center"> 
        <i class="fas fa-calendar-check text-lg mr-3"> </i> 
        <span class contenteditable="false" style="outline: none;"> 工作台 </span> 
       </div> 
      </div> </a> 
     <div class="submenu" id="submenu-monthly"> 
     </div> 
    </div> 
    <!-- 公司公告 --> 
    <div class="menu-group"> 
     <div class="menu-item menu-item-active flex justify-between" data-menu="announcements"> 
      <div class="flex items-center"> 
       <i class="fas fa-bullhorn text-lg mr-3"> </i> 
       <span> 公司公告 </span> 
      </div> 
     </div> 
     <div class="submenu" id="submenu-announcements"> 
     </div> 
    </div> 
    <!-- 年规管理 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="planning"> 
      <div class="flex items-center"> 
       <i class="fas fa-bullseye text-lg mr-3"> </i> 
       <span> 年规管理 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-planning" data-ytextravalue="extra-dz2s6448q"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1969787710210048000&amp;appName=demo1" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top" data-ytoriginindex="0" data-ytindex="0" data-ytparentvalue="extra-dz2s6448q"> 
       <div class="submenu-item" data-page="goal-dashboard" data-selectorname="#id-eafth" style> 
        <i class="fas fa-chart-pie text-xs mr-2"> </i> 
        <span style> 目标进度看板 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1390&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969803110087917568&amp;appName=demo1" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top" data-ytoriginindex="1" data-ytindex="1" data-ytparentvalue="extra-dz2s6448q"> 
       <div class="submenu-item" data-page="performance-entry" data-selectorname="#id-024xj" style> 
        <i class="fas fa-pencil-alt text-xs mr-2"> </i> 
        <span> 业绩回填 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1303&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967832363245240320&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top" data-ytoriginindex="2" data-ytindex="2" data-ytparentvalue="extra-dz2s6448q"> 
       <div class="submenu-item" data-page="product-library" data-selectorname="#id-mexhf" style> 
        <i class="fas fa-box text-xs mr-2"> </i> 
        <span> 产品库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969766167933353984&amp;appName=demo1" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top" data-ytparentvalue="extra-dz2s6448q" data-ytoriginindex="3" data-ytindex="3"> 
       <div class="submenu-item" data-page="marketing-plan" data-selectorname="#id-jwgdf" style> 
        <i class="fas fa-bullhorn text-xs mr-2"> </i> 
        <span> 营销计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1303&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967839529905684480&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top" data-ytoriginindex="4" data-ytindex="4"> 
       <div class="submenu-item" data-page="customer-records" data-selectorname="#id-t3ofb" style> 
        <i class="fas fa-users text-xs mr-2"> </i> 
        <span> 客户档案 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1303&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967841389332922368&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top" data-ytoriginindex="5" data-ytindex="5"> 
       <div class="submenu-item" data-page="pk-activities" data-selectorname="#id-p06ig" style> 
        <i class="fas fa-trophy text-xs mr-2"> </i> 
        <span> PK 活动 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 工作管理 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="work"> 
      <div class="flex items-center"> 
       <i class="fas fa-briefcase text-lg mr-3"> </i> 
       <span> 工作管理 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-work"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1303&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967843857995399168&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="work-dashboard" data-selectorname="#id-lpvb0" style> 
        <i class="fas fa-chart-bar text-xs mr-2"> </i> 
        <span> 周日报管理 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1303&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967850301578805248&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="meeting-plan" data-selectorname="#id-wn08y" style> 
        <i class="fas fa-calendar-alt text-xs mr-2"> </i> 
        <span> 会议计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1187&amp;h=772&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967852373321711616&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="work-tasks" data-selectorname="#id-0n5h8" style> 
        <i class="fas fa-tasks text-xs mr-2"> </i> 
        <span style> 工作任务 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 学习成长 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="learning"> 
      <div class="flex items-center"> 
       <i class="fas fa-graduation-cap text-lg mr-3"> </i> 
       <span> 学习成长 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-learning"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1113&amp;h=728&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968967895824203776&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="company-culture" data-selectorname="#id-4eq9b" style> 
        <i class="fas fa-building text-xs mr-2"> </i> 
        <span style> 企业文化 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1303&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868783729049600&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="course-center" data-selectorname="#id-uf7mb" style> 
        <i class="fas fa-book-open text-xs mr-2"> </i> 
        <span style> 课程中心 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1303&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868795963834368&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="knowledge-base" data-selectorname="#id-3y7n3" style> 
        <i class="fas fa-book text-xs mr-2"> </i> 
        <span> 知识库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1303&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868797977100288&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="learning-plan" data-selectorname="#id-jmpo4" style> 
        <i class="fas fa-clipboard-list text-xs mr-2"> </i> 
        <span> 学习计划 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 个人档案 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="profile"> 
      <div class="flex items-center"> 
       <i class="fas fa-user text-lg mr-3"> </i> 
       <span> 个人档案 </span> 
      </div> 
      <i class="fas fa-chevron-down text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu" id="submenu-profile"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1303&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868800292356096&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="basic-info" data-selectorname="#id-vt0oi" style> 
        <i class="fas fa-id-card text-xs mr-2"> </i> 
        <span style> 基本信息 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1303&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868801315766272&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="account-settings" data-selectorname="#id-vhjxo" style> 
        <i class="fas fa-cog text-xs mr-2"> </i> 
        <span style> 账号设置 </span> 
       </div> </a> 
     </div> 
    </div> 
   </nav> 
  </aside> 
  <!-- 右侧内容区域 --> 
  <main class="flex-1 flex flex-col overflow-hidden"> 
   <!-- 顶部导航栏 --> 
   <header class="h-16 bg-white border-b border-neutral-dark flex items-center justify-between px-6 z-10"> 
    <div class="flex items-center"> 
     <button class="mr-4 text-text-secondary hover:text-primary transition-colors duration-200" id="toggle-sidebar"> <i class="fas fa-bars text-xl"> </i> </button> 
     <div class="text-sm text-text-tertiary" id="breadcrumb"> 
      <span> 公司公告 </span> 
     </div> 
    </div> 
    <div class="flex items-center space-x-6"> 
     <div class="relative"> 
      <input class="pl-10 pr-4 py-2 rounded-full text-sm border border-neutral-dark focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64" placeholder="搜索..." type="text"> 
      <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-tertiary"> </i> 
     </div> 
     <div class="relative"> 
      <button class="relative text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bell text-xl"> </i> <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"> </span> </button> 
     </div> 
     <div class="flex items-center cursor-pointer group"> 
      <img alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all duration-200" src="./1968578812111224832/f48e4ae6256cb09fa61d11486866b14f.png"> 
      <div class="ml-2 hidden md:block"> 
       <div class="text-sm font-medium">
         张明 
       </div> 
       <div class="text-xs text-text-tertiary">
         销售部 
       </div> 
      </div> 
      <i class="fas fa-angle-down ml-1 text-text-tertiary"> </i> 
     </div> 
    </div> 
   </header> 
   <!-- 内容滚动区域 --> 
   <div class="flex-1 overflow-y-auto p-6 bg-neutral" id="content-area"> 
    <!-- 历史公告页面 --> 
    <div class="page active" id="page-historical-announcements"> 
     <div class="flex justify-between items-center mb-6"> 
      <h2 class="text-2xl font-bold"> 公司公告 </h2> 
      <div class="flex space-x-3"> 
       <div class="relative"> 
        <input class="pl-10 pr-4 py-2 rounded-lg text-sm border border-neutral-dark focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64" placeholder="搜索历史公告..." type="text"> 
        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-tertiary"> </i> 
       </div> 
       <div class="flex items-center space-x-2"> 
        <div class="relative"> 
         <select class="appearance-none bg-white border border-neutral-dark rounded-lg px-4 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"> <option> 全部部门 </option> <option> 销售部 </option> <option> 市场部 </option> <option> 人力资源部 </option> <option> 行政部 </option> <option> 产品部 </option> </select> 
         <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary pointer-events-none text-xs"> </i> 
        </div> 
        <div class="relative"> 
         <select class="appearance-none bg-white border border-neutral-dark rounded-lg px-4 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"> <option> 全部类型 </option> <option> 公司通知 </option> <option> 活动安排 </option> <option> 培训信息 </option> <option> 政策调整 </option> <option> PK活动 </option> </select> 
         <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary pointer-events-none text-xs"> </i> 
        </div> 
        <button class="btn-outline"> <i class="fas fa-calendar-alt mr-2"> </i> 按日期筛选 </button> 
       </div> 
      </div> 
     </div> 
     <!-- 月份归档 --> 
     <!-- 模板内容 --> 
     <div class="bg-white rounded-lg card-shadow p-6 mb-6 border-l-4 border-red-500 cursor-pointer hover:shadow-lg transition-all duration-300" id="pinned-announcement"> 
      <div class="flex justify-between items-start mb-4"> 
       <div> 
        <div class="flex items-center mb-2"> 
         <span class="badge badge-danger mr-2"> 置顶 </span> 
         <span class="badge badge-success"> 公司通知 </span> 
        </div> 
        <h3 class="text-xl font-bold mb-2"> 2024年元旦放假通知 </h3> 
       </div> 
       <div class="text-sm text-text-tertiary">
         2023-12-28 
       </div> 
      </div> 
      <div class="prose max-w-none text-text-secondary mb-4 max-h-40 overflow-hidden transition-all duration-300" id="announcement-content"> 
       <p> 根据国家法定节假日安排，结合公司实际情况，现将2024年元旦放假安排通知如下： </p> 
       <ul class="list-disc pl-5 my-3 space-y-1"> 
        <li> 2023年12月30日至2024年1月1日放假，共3天。 </li> 
        <li> 2024年1月2日（星期二）正常上班。 </li> 
        <li> 各部门需在12月29日前完成节前安全检查，并安排好假期值班人员。 </li> 
        <li> 放假期间，请各部门确保信息畅通，遇有重大突发事件，要按规定及时报告并妥善处置。 </li> 
       </ul> 
       <p> 预祝全体员工新年快乐！ </p> 
      </div> 
      <div class="text-center mb-4"> 
       <button class="text-primary hover:text-accent transition-colors duration-200 font-medium flex items-center mx-auto" id="view-more-btn"> <span> 查看详情 </span> <i class="fas fa-chevron-down ml-1 text-xs"> </i> </button> 
      </div> 
      <div class="flex justify-between items-center pt-4 border-t border-neutral-dark"> 
       <div class="text-sm text-text-tertiary flex items-center"> 
        <i class="fas fa-building mr-1"> </i> 
        <span> 行政部 </span> 
        <span class="mx-2"> | </span> 
        <i class="fas fa-eye mr-1"> </i> 
        <span> 856 次浏览 </span> 
       </div> 
       <div class="flex space-x-3"> 
       </div> 
      </div> 
     </div> 
     <!-- 历史归档 --> 
     <div class="bg-white rounded-lg card-shadow p-5 mb-6" data-ytextravalue="extra-rl26otn11"> 
      <div class="flex justify-between items-center mb-4"> 
       <h3 class="text-lg font-semibold" data-ytindex="0" data-ytoriginindex="0" data-ytparentvalue="extra-rl26otn11"> 历史归档 </h3> 
       <div class="relative"> 
        <select class="appearance-none bg-white border border-neutral-dark rounded-lg px-4 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"> <option> 2023年 </option> <option> 2022年 </option> <option> 2021年 </option> <option> 2020年 </option> </select> 
        <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary pointer-events-none text-xs"> </i> 
       </div> 
      </div> 
      <div class="grid grid-cols-12 gap-2" data-ytindex="1" data-ytoriginindex="1"> 
       <button class="py-2 bg-primary/10 text-primary rounded-md text-sm"> 1月 </button> 
       <button class="py-2 bg-primary/10 text-primary rounded-md text-sm"> 2月 </button> 
       <button class="py-2 bg-primary/10 text-primary rounded-md text-sm"> 3月 </button> 
       <button class="py-2 bg-primary/10 text-primary rounded-md text-sm"> 4月 </button> 
       <button class="py-2 bg-primary/10 text-primary rounded-md text-sm"> 5月 </button> 
       <button class="py-2 bg-primary/10 text-primary rounded-md text-sm"> 6月 </button> 
       <button class="py-2 bg-primary/10 text-primary rounded-md text-sm"> 7月 </button> 
       <button class="py-2 bg-primary/10 text-primary rounded-md text-sm"> 8月 </button> 
       <button class="py-2 bg-primary/10 text-primary rounded-md text-sm"> 9月 </button> 
       <button class="py-2 bg-primary/10 text-primary rounded-md text-sm"> 10月 </button> 
       <button class="py-2 bg-white border border-neutral-dark rounded-md text-sm text-text-secondary hover:bg-neutral transition-colors duration-200"> 11月 </button> 
       <button class="py-2 bg-white border border-neutral-dark rounded-md text-sm text-text-secondary hover:bg-neutral transition-colors duration-200"> 12月 </button> 
      </div> 
     </div> 
     <!-- 公告列表 --> 
     <div class="bg-white rounded-lg card-shadow overflow-hidden"> 
      <div class="p-5 border-b border-neutral-dark flex justify-between items-center"> 
       <h3 class="font-semibold text-lg"> 2023年历史公告列表 </h3> 
       <div class="text-sm text-text-tertiary">
         共 126 条公告 
       </div> 
      </div> 
      <div class="divide-y divide-neutral-dark"> 
       <!-- 10月公告 --> 
       <div class="p-6 border-l-4 border-primary bg-primary/5"> 
        <div class="flex justify-between items-center mb-4"> 
         <h4 class="text-base font-medium text-text-tertiary"> 2023年10月 </h4> 
         <span class="text-sm text-text-tertiary"> 共 12 条 </span> 
        </div> 
        <div class="space-y-4 mb-2"> 
         <div class="p-4 bg-white rounded-lg border border-neutral-dark hover:border-primary/30 transition-colors duration-200 cursor-pointer"> 
          <div class="flex justify-between items-start mb-2"> 
           <h3 class="text-base font-semibold"> 关于2023年第四季度销售激励政策的通知 </h3> 
           <span class="badge badge-warning"> 政策调整 </span> 
          </div> 
          <p class="text-text-secondary text-sm mb-3 line-clamp-2"> 为激励销售团队完成年度目标，公司决定实施第四季度销售激励政策。政策包括超额完成奖励、新客户开发奖励、团队协作奖励等多个维度，具体细则详见附件。本政策自2023年10月1日起执行。 </p> 
          <div class="flex justify-between items-center text-xs text-text-tertiary"> 
           <div class="flex items-center"> 
            <i class="fas fa-building mr-1"> </i> 
            <span> 销售部 </span> 
           </div> 
           <div class="flex items-center"> 
            <i class="fas fa-clock mr-1"> </i> 
            <span> 2023-10-28 </span> 
           </div> 
           <div class="flex items-center"> 
            <i class="fas fa-eye mr-1"> </i> 
            <span> 452 </span> 
           </div> 
          </div> 
         </div> 
         <div class="p-4 bg-white rounded-lg border border-neutral-dark hover:border-primary/30 transition-colors duration-200 cursor-pointer"> 
          <div class="flex justify-between items-start mb-2"> 
           <h3 class="text-base font-semibold"> 10月优秀员工表彰决定 </h3> 
           <span class="badge badge-success"> 公司通知 </span> 
          </div> 
          <p class="text-text-secondary text-sm mb-3 line-clamp-2"> 经各部门推荐及管理层评审，决定对10月份在工作中表现突出的员工予以表彰。表彰名单包括销售部李华、市场部王芳、产品部张伟等15名员工，表彰大会将于11月5日下午2点在公司大礼堂举行。 </p> 
          <div class="flex justify-between items-center text-xs text-text-tertiary"> 
           <div class="flex items-center"> 
            <i class="fas fa-building mr-1"> </i> 
            <span> 人力资源部 </span> 
           </div> 
           <div class="flex items-center"> 
            <i class="fas fa-clock mr-1"> </i> 
            <span> 2023-10-25 </span> 
           </div> 
           <div class="flex items-center"> 
            <i class="fas fa-eye mr-1"> </i> 
            <span> 389 </span> 
           </div> 
          </div> 
         </div> 
         <div class="p-4 bg-white rounded-lg border border-neutral-dark hover:border-primary/30 transition-colors duration-200 cursor-pointer"> 
          <div class="flex justify-between items-start mb-2"> 
           <h3 class="text-base font-semibold"> 万圣节主题团建活动安排 </h3> 
           <span class="badge badge-info"> 活动安排 </span> 
          </div> 
          <p class="text-text-secondary text-sm mb-3 line-clamp-2"> 为丰富员工业余生活，增强团队凝聚力，公司定于10月31日举办"万圣节狂欢夜"主题团建活动。活动包括主题装扮比赛、趣味游戏、抽奖等环节，地点在公司活动室，时间为晚上6点至9点。请各部门统计参与人数并于10月27日前报行政部。 </p> 
          <div class="flex justify-between items-center text-xs text-text-tertiary"> 
           <div class="flex items-center"> 
            <i class="fas fa-building mr-1"> </i> 
            <span> 行政部 </span> 
           </div> 
           <div class="flex items-center"> 
            <i class="fas fa-clock mr-1"> </i> 
            <span> 2023-10-20 </span> 
           </div> 
           <div class="flex items-center"> 
            <i class="fas fa-eye mr-1"> </i> 
            <span> 512 </span> 
           </div> 
          </div> 
         </div> 
        </div> 
        <button class="text-primary text-sm flex items-center mx-auto mb-2 hover:text-accent transition-colors duration-200"> 查看更多10月公告 <i class="fas fa-chevron-down ml-1 text-xs"> </i> </button> 
       </div> 
       <!-- 9月公告 --> 
       <div class="p-6"> 
        <div class="flex justify-between items-center mb-4"> 
         <h4 class="text-base font-medium text-text-tertiary"> 2023年9月 </h4> 
         <span class="text-sm text-text-tertiary"> 共 15 条 </span> 
        </div> 
        <div class="space-y-4 mb-2"> 
         <div class="p-4 bg-white rounded-lg border border-neutral-dark hover:border-primary/30 transition-colors duration-200 cursor-pointer"> 
          <div class="flex justify-between items-start mb-2"> 
           <h3 class="text-base font-semibold"> 国庆节放假通知及工作安排 </h3> 
           <span class="badge badge-success"> 公司通知 </span> 
          </div> 
          <p class="text-text-secondary text-sm mb-3 line-clamp-2"> 根据国家法定节假日安排，结合公司实际情况，现将2023年国庆节放假安排通知如下：10月1日至10月7日放假调休，共7天。10月8日（星期日）、10月9日（星期一）上班。各部门需在9月30日前完成节前安全检查，并安排好假期值班人员。 </p> 
          <div class="flex justify-between items-center text-xs text-text-tertiary"> 
           <div class="flex items-center"> 
            <i class="fas fa-building mr-1"> </i> 
            <span> 行政部 </span> 
           </div> 
           <div class="flex items-center"> 
            <i class="fas fa-clock mr-1"> </i> 
            <span> 2023-09-25 </span> 
           </div> 
           <div class="flex items-center"> 
            <i class="fas fa-eye mr-1"> </i> 
            <span> 628 </span> 
           </div> 
          </div> 
         </div> 
         <div class="p-4 bg-white rounded-lg border border-neutral-dark hover:border-primary/30 transition-colors duration-200 cursor-pointer"> 
          <div class="flex justify-between items-start mb-2"> 
           <h3 class="text-base font-semibold"> 新产品上市培训安排 </h3> 
           <span class="badge badge-info"> 培训信息 </span> 
          </div> 
          <p class="text-text-secondary text-sm mb-3 line-clamp-2"> 公司将于10月推出全新系列产品，为确保销售团队充分了解产品特性，定于9月20日至9月22日开展新产品上市培训。培训内容包括产品知识、销售技巧、市场定位等，所有销售人员必须参加，不得请假。 </p> 
          <div class="flex justify-between items-center text-xs text-text-tertiary"> 
           <div class="flex items-center"> 
            <i class="fas fa-building mr-1"> </i> 
            <span> 产品部 </span> 
           </div> 
           <div class="flex items-center"> 
            <i class="fas fa-clock mr-1"> </i> 
            <span> 2023-09-15 </span> 
           </div> 
           <div class="flex items-center"> 
            <i class="fas fa-eye mr-1"> </i> 
            <span> 326 </span> 
           </div> 
          </div> 
         </div> 
        </div> 
        <button class="text-primary text-sm flex items-center mx-auto mb-2 hover:text-accent transition-colors duration-200"> 查看更多9月公告 <i class="fas fa-chevron-down ml-1 text-xs"> </i> </button> 
       </div> 
       <!-- 8月公告 --> 
       <div class="p-6"> 
        <div class="flex justify-between items-center mb-4"> 
         <h4 class="text-base font-medium text-text-tertiary"> 2023年8月 </h4> 
         <span class="text-sm text-text-tertiary"> 共 10 条 </span> 
        </div> 
        <div class="space-y-4 mb-2"> 
         <div class="p-4 bg-white rounded-lg border border-neutral-dark hover:border-primary/30 transition-colors duration-200 cursor-pointer"> 
          <div class="flex justify-between items-start mb-2"> 
           <h3 class="text-base font-semibold"> 关于开展"夏日业绩冲刺"PK活动的通知 </h3> 
           <span class="badge badge-warning"> PK活动 </span> 
          </div> 
          <p class="text-text-secondary text-sm mb-3 line-clamp-2"> 为抓住夏季销售旺季，公司决定开展"夏日业绩冲刺"PK活动。活动时间为8月15日至9月15日，分为个人赛和团队赛两个组别，设置丰厚奖金及荣誉奖励。各销售团队需在8月10日前完成报名，具体规则详见附件。 </p> 
          <div class="flex justify-between items-center text-xs text-text-tertiary"> 
           <div class="flex items-center"> 
            <i class="fas fa-building mr-1"> </i> 
            <span> 市场部 </span> 
           </div> 
           <div class="flex items-center"> 
            <i class="fas fa-clock mr-1"> </i> 
            <span> 2023-08-10 </span> 
           </div> 
           <div class="flex items-center"> 
            <i class="fas fa-eye mr-1"> </i> 
            <span> 489 </span> 
           </div> 
          </div> 
         </div> 
        </div> 
        <button class="text-primary text-sm flex items-center mx-auto mb-2 hover:text-accent transition-colors duration-200"> 查看更多8月公告 <i class="fas fa-chevron-down ml-1 text-xs"> </i> </button> 
       </div> 
      </div> 
      <div class="p-6 border-t border-neutral-dark"> 
       <div class="flex justify-between items-center"> 
        <div class="text-sm text-text-tertiary">
          显示 1 至 6 条，共 126 条 
        </div> 
        <div class="flex space-x-1"> 
         <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark text-text-secondary hover:border-primary hover:text-primary transition-colors duration-200" disabled> <i class="fas fa-chevron-left text-xs"> </i> </button> 
         <button class="w-9 h-9 flex items-center justify-center rounded bg-primary text-white"> 1 </button> 
         <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"> 2 </button> 
         <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"> 3 </button> 
         <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"> 4 </button> 
         <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"> 5 </button> 
         <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"> <i class="fas fa-chevron-right text-xs"> </i> </button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- 其他页面保持不变 --> 
    <div class="page hidden" id="page-monthly-tasks"> 
     <!-- 月度待办页面内容 --> 
    </div> 
    <div class="page hidden" id="page-latest-announcements"> 
     <!-- 最新公告页面内容 --> 
    </div> 
    <div class="page hidden" id="page-goal-dashboard"> 
     <!-- 目标进度看板页面内容 --> 
    </div> 
   </div> 
  </main> 
  <!-- 公告详情抽屉 --> 
  <div class="fixed inset-y-0 right-0 w-full md:w-3/5 lg:w-2/5 bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50" id="announcement-drawer"> 
   <div class="flex flex-col h-full"> 
    <!-- 抽屉头部 --> 
    <div class="p-6 border-b border-neutral-dark flex justify-between items-center"> 
     <h3 class="text-xl font-bold" id="drawer-title"> 公告详情 </h3> 
     <button class="text-text-secondary hover:text-primary transition-colors duration-200" id="close-drawer"> <i class="fas fa-times text-xl"> </i> </button> 
    </div> 
    <!-- 抽屉内容 --> 
    <div class="flex-1 overflow-y-auto p-6" id="drawer-content"> 
     <!-- 内容将通过JS动态填充 --> 
    </div> 
    <!-- 抽屉底部 --> 
    <div class="p-6 border-t border-neutral-dark flex justify-end space-x-3" id="drawer-footer"> 
     <!-- 底部按钮将通过JS动态填充 --> 
    </div> 
   </div> 
  </div> 
  <!-- 遮罩层 --> 
  <div class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden transition-opacity duration-300" id="drawer-overlay"> 
  </div> 
  <script>// 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 公告抽屉功能
            const announcementCard = document.getElementById('pinned-announcement');
            const announcementDrawer = document.getElementById('announcement-drawer');
            const drawerOverlay = document.getElementById('drawer-overlay');
            const closeDrawerBtn = document.getElementById('close-drawer');
            const drawerTitle = document.getElementById('drawer-title');
            const drawerContent = document.getElementById('drawer-content');
            const drawerFooter = document.getElementById('drawer-footer');
            const viewMoreBtn = document.getElementById('view-more-btn');
            
            // 保存原始公告内容
            const originalAnnouncementContent = document.getElementById('announcement-content').innerHTML;
            const originalAnnouncementFooter = document.querySelector('#pinned-announcement .flex.justify-between.items-center').innerHTML;
            const originalAnnouncementTitle = document.querySelector('#pinned-announcement h3').textContent;
            
            // 打开抽屉
            const openDrawer = () => {
                announcementDrawer.classList.remove('translate-x-full');
                drawerOverlay.classList.remove('hidden');
                document.body.classList.add('overflow-hidden');
                
                // 填充抽屉内容
                drawerTitle.textContent = originalAnnouncementTitle;
                drawerContent.innerHTML = `<div class="prose max-w-none text-text-secondary">${originalAnnouncementContent}</div>`;
                drawerFooter.innerHTML = originalAnnouncementFooter;
            };
            
            // 关闭抽屉
            const closeDrawer = () => {
                announcementDrawer.classList.add('translate-x-full');
                drawerOverlay.classList.add('hidden');
                document.body.classList.remove('overflow-hidden');
            };
            
            // 点击公告卡片打开抽屉
            announcementCard.addEventListener('click', (e) => {
                // 防止点击内部按钮时触发卡片点击事件
                if (!e.target.closest('#view-more-btn') && !e.target.closest('#close-drawer')) {
                    openDrawer();
                }
            });
            
            // 点击查看更多按钮打开抽屉
            viewMoreBtn.addEventListener('click', openDrawer);
            
            // 点击关闭按钮关闭抽屉
            closeDrawerBtn.addEventListener('click', closeDrawer);
            
            // 点击遮罩层关闭抽屉
            drawerOverlay.addEventListener('click', closeDrawer);
            
            // 监听窗口大小变化，调整抽屉宽度
            window.addEventListener('resize', () => {
                // 防止频繁触发
                clearTimeout(window.resizeTimer);
                window.resizeTimer = setTimeout(() => {
                    // 这里可以根据需要调整抽屉宽度
                }, 250);
            });
            
            // 菜单切换功能
const menuItems = document.querySelectorAll('.menu-item[data-menu]');
            menuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有菜单的活动状态
                    document.querySelectorAll('.menu-item').forEach(menu => {
                        menu.classList.remove('menu-item-active');
                    });
                    
                    // 添加当前菜单的活动状态
                    item.classList.add('menu-item-active');
                    
                    const menuId = item.getAttribute('data-menu');
                    const submenu = document.getElementById(`submenu-${menuId}`);
                    const icon = item.querySelector('i:last-child');
                    
                    // 切换子菜单显示/隐藏
                    if (submenu.classList.contains('hidden')) {
                        submenu.classList.remove('hidden');
                        icon.classList.remove('fa-chevron-right');
                        icon.classList.add('fa-chevron-down');
                    } else {
                        submenu.classList.add('hidden');
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-right');
                    }
                });
            });
            
            // 子菜单切换功能
            const submenuItems = document.querySelectorAll('.submenu-item[data-page]');
            submenuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有子菜单的活动状态
                    document.querySelectorAll('.submenu-item').forEach(submenu => {
                        submenu.classList.remove('submenu-item-active');
                    });
                    
                    // 添加当前子菜单的活动状态
                    item.classList.add('submenu-item-active');
                    
                    // 获取页面ID和面包屑信息
                    const pageId = item.getAttribute('data-page');
                    const parentMenu = item.closest('.submenu').id.replace('submenu-', '');
                    const parentMenuText = document.querySelector(`.menu-item[data-menu="${parentMenu}"] span`).textContent;
                    const currentMenuText = item.querySelector('span').textContent;
                    
                    // 更新面包屑
                    document.getElementById('breadcrumb').innerHTML = `

























<span>${parentMenuText}</span>
  <i class="fas fa-angle-right mx-2 text-xs">
  </i>
  <span>${currentMenuText}</span>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  `;
                    
                    // 切换页面显示
                    document.querySelectorAll('.page').forEach(page => {
                        page.classList.add('hidden');
                    });
                    document.getElementById(`page-${pageId}`).classList.remove('hidden');
                });
            });
            
            // 侧边栏切换功能
            const toggleSidebar = document.getElementById('toggle-sidebar');
            const sidebar = document.getElementById('sidebar');
            toggleSidebar.addEventListener('click', () => {
                if (sidebar.classList.contains('w-220')) {
                    sidebar.classList.remove('w-220');
                    sidebar.classList.add('w-20');
                    // 隐藏菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => {
                        text.classList.add('hidden');
                    });
                    document.querySelectorAll('.submenu').forEach(submenu => {
                        submenu.classList.add('hidden');
                    });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => {
                        icon.classList.add('hidden');
                    });
                } else {
                    sidebar.classList.remove('w-20');
                    sidebar.classList.add('w-220');
                    // 显示菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => {
                        text.classList.remove('hidden');
                    });
                    // 恢复之前打开的子菜单
                    document.querySelectorAll('.menu-item-active').forEach(menu => {
                        const menuId = menu.getAttribute('data-menu');
                        const submenu = document.getElementById(`submenu-${menuId}`);
                        if (submenu) {
                            submenu.classList.remove('hidden');
                        }
                    });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => {
                        icon.classList.remove('hidden');
                    });
                }
            });
        });</script>  
 </body>
</html>